<template>
	<view class="personal">
		<view class="avator item">
			<text>头像</text>
			<image :src="userInfo.avatar" mode=""></image>
		</view>
		<view class="username item">
			<text>用户名</text>
			<text>{{ userInfo.username }}</text>
		</view>
		<view class="nickname item">
			<text>昵称</text>
			<text>{{ userInfo.nickname }}</text>
		</view>
		<view class="tel item">
			<text>手机号</text>
			<text>{{ userInfo.tel }}</text>
		</view>
		<view class="logout" @tap="logout">
			退出登陆
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo')
			};
		},
		methods: {
			logout () {
				uni.removeStorageSync('userInfo');
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: '个人中心'
			});
		}
	}
</script>

<style lang="scss">
.personal {
		width: 100vw;
		height: calc(100vh - 44px);
		background-color: #F1ECE7;
		.item {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 20rpx;
			border-bottom: 1px solid #e5e5e5;
			text {
				color: #494949;
				&:last-child {
					color: #999;
				}
			}
		}
		.avator {
			height: 180rpx;
			// padding: 20rpx 0;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
		.logout {
			width: 385rpx;
			height: 94rpx;
			border-radius: 10rpx;
			margin: 200rpx auto 0;
			color: #FFFFFF;
			background-color: #1C4B47;
			font-weight: bolder;
			display: flex;
			align-items: center;
			justify-content: center;
		}
}
</style>
